<template>
  <div>
    <ModuleHeader></ModuleHeader>
    <div class="record-page">
      <div class="record-header">
        <router-link to="/user/asset-otc">币币账户</router-link>/
        财务记录
      </div>
      <div class="card-box">
        <div class="left">
          <span @click="cardClick('charge')" :class="currentCard=='charge'?'card-curray':''">充币记录</span>
          <span @click="cardClick('mention')" :class="currentCard=='mention'?'card-curray':''">提币记录</span>
          <span @click="cardClick('record')" :class="currentCard=='record'?'card-curray':''">转账记录</span>
          <span @click="cardClick('cec')" :class="currentCard=='cec'?'card-curray':''">币币交易</span>
          <span
            @click="cardClick('transfer')"
            :class="currentCard=='transfer'?'card-curray':''"
          >划转记录</span>
          <span @click="cardClick('bill')" :class="currentCard=='bill'?'card-curray':''">账单明细</span>
        </div>
        <!-- 筛选的列表 -->
        <div class="right">
          <span @mouseenter="coinNavHover()" @mouseleave="coinNavLeave()">
            {{currentSelect.label}}
            <i class="el-icon-caret-bottom el-icon"></i>
            <ul class="coin-nav" ref="coinNav">
              <li
                class="nav-list"
                v-for="(item,index) in cecCoinList"
                :key="index"
                @click="coinNavClick(item.Id,item.CoinTag)"
              >{{item.CoinTag}}</li>
            </ul>
          </span>
        </div>
      </div>
      <div v-loading="loading">
        <div class="table-body" v-if="dataList&&dataList.length>0">
          <!-- 充币记录 -->
          <!-- 提币记录 -->
          <div class="module-box" v-show="(currentCard=='charge')||(currentCard=='mention')">
            <div class="type-info-box">
              <span class="list-info coin-box">{{ $t("listview.time") }}</span>
              <span class="list-info useable-box">
                币种
              </span>
              <span class="list-info frost-box">类型</span>
              <span class="list-info ttm-box">{{ $t("asset.quantity") }}</span>
              <span class="list-info ttm-box">
                {{
                $t("asset.service_charge")
                }}
              </span>
              <span class="list-info ttm-box">
                {{
                $t("asset.actual_account")
                }}
              </span>
              <span class="list-info locked-box">
                {{
                $t("entrust.state")
                }}
              </span>
              <span class="list-info action-box">
                {{
                $t("my_ad.operation")
                }}
              </span>
            </div>
          </div>
          <!-- 转账记录,币币交易---------------------------------- 记录-->
          <el-table
            :data="dataList"
            style="width:100%"
            v-show="(currentCard=='record')||(currentCard=='cec')"
          >
            <el-table-column prop="CreateTimeAPP" label="交易时间" width="200px"></el-table-column>
            <el-table-column prop="CoinName" label="币种" width="200px"></el-table-column>
            <el-table-column label="类型" width="250px">
              <template slot-scope="scope">
                <span>{{ scope.row.TypeStr }} - {{scope.row.Explain}}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="250px">
              <template slot-scope="scope">
                <span :class="scope.row.NumStatus*1>=0?'text-positive':'text-negative'">{{ scope.row.NumStatus }}</span>
              </template>
            </el-table-column>
            <!-- 转账记录状态的显示 -->
            <el-table-column prop="RecordStatus" label="状态" v-if="currentCard=='record'">
               <template slot-scope="scope">
                <span class="text-ellipsis" v-if="scope.row.RecordStatus==1">交易失败</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==2">交易成功</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==3">交易成功</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==4">审核通过</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==5">打包成功</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==6">区块确认中</span>
                <span class="text-ellipsis" v-else>其它</span>
              </template>
            </el-table-column>
            <!-- 币币交易状态的显示 -->
            <el-table-column prop="RecordStatus" label="状态" v-else>
               <template slot-scope="scope">
                <span class="text-ellipsis" v-if="scope.row.RecordStatus==1">交易失败</span>
                <span class="text-ellipsis" v-else-if="scope.row.RecordStatus==2">交易成功</span>
                <span class="text-ellipsis" v-else>其它</span>
              </template>
            </el-table-column>
            <el-table-column label="交易对象" align="right">
              <template slot-scope="scope">
                <span class="text-ellipsis">{{ scope.row.ToAdress }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 划转-----------------------------------的列表数据 -->
          <el-table :data="dataList" style="width:100%" v-show="currentCard=='transfer'">
            <el-table-column prop="CreateTime" label="时间" width="250px"></el-table-column>
            <el-table-column prop="CoinName" label="币种" width="250px"></el-table-column>
            <el-table-column label="类型" width="300px">
              <template slot-scope="scope">
                <span v-if="scope.row.Type==1">币币账户到法币账户</span>
                <span v-else-if="scope.row.Type==2">法币账户到币币账户</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="300px">
              <template slot-scope="scope">
                <span>{{ scope.row.Coin }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="stuts" label="状态" width="100px" align="right"></el-table-column>
          </el-table>
          <!-- 账单明细----------------------------的列表数据 -->
          <el-table :data="dataList" style="width:100%" v-if="currentCard=='bill'">
            <el-table-column prop="CreateTimeAPP" label="时间" width="250px"></el-table-column>
            <el-table-column prop="CoinName" label="币种" width="250px"></el-table-column>
            <el-table-column prop="Explain" label="类型" width="300px"></el-table-column>
            <el-table-column label="数量" width="300px">
              <template slot-scope="scope">
                <span>{{ scope.row.NumStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100px" align="right">
              <template slot-scope="scope">
                <span>{{ scope.row.DealType }}</span>
                <span v-if="scope.row.DealType*1==1">交易失败</span>
                <span v-else-if="scope.row.DealType*1==2">交易成功</span>
                <span
                  v-else-if="scope.row.DealType*1==3||scope.row.DealType*1==4||scope.row.DealType*1==5||scope.row.DealType*1==6"
                >交易处理中</span>
                <span v-else-if="scope.row.DealType*1==7">未知交易</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 空数据----------------------------的默认显示 -->
        <div class="empty-box" v-else>
          <div class="empty-center">
            <P class="empty-hint">当前暂无相关记录</P>
          </div>
        </div>

        <div class="fenye" v-if="dataList&&dataList.length>0">
          <!-- 分页 -->
          <el-pagination
            background
            class="fenye"
            layout="prev, pager, next"
            :total="pageCount*1==0?1:pageCount"
            :page-size="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <ModuleFooter></ModuleFooter>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      cecCoinList: [], //币币交易筛选列表
      currentSelect: {
        //当前的筛选值
        label: "全部",
        value: 0
      },
      sizer: {
        // 分页数据
        page: 1,
        pagesize: 10
      },
      pageCount: 1, //分页量
      dataList: [],
      loading: true,
      total: 0,

      currentCard: "charge",
      coinRecord: "ToUp",
      isCardIndex: "",
      loading: false
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter,
  },
  methods: {
    /*
     *@description 币币交易筛选列表请求
     */
    reqCecSuppertCoin() {
      if (this.cecSuppertCoin.length <= 0) {
        this.axios.post(this.$baseURL + "/cec/coinlist").then(res => {
          if (res.data.Code == 200) {
            if (res.data) {
              let data = this.$decryptByDES(res.data.Data);
              data = JSON.parse(data);
              data.List.unshift({CoinTag:"全部",Id:0})
              this.cecCoinList = data.List;
              // 数据持久化存储
              this.$store.commit("store_cecSuppertCoin", data.List);
            } else {
              this.cecCoinList = [];
            }
          }
        });
      } else {
        this.cecCoinList = this.cecSuppertCoin;
      }
    },
    /*
     *筛选按钮的点击,鼠标进入，鼠标离开事件
     */
    coinNavClick(val, label) {
      this.currentSelect.label = label;
      this.currentSelect.value = val;
      this.$refs.coinNav.style.height = 0;
      // 需要重新发起数据的请求
      this.sizer.page = 1;
      this.cardClick();
    },
    coinNavHover() {
      this.$refs.coinNav.style.height = "auto";
    },
    coinNavLeave() {
      this.$refs.coinNav.style.height = 0;
    },
    /*
     *统一的api接口请求处理
     *@param url,data
     */
    reqApi(url, param) {
      param = JSON.stringify(param);
      param = this.$encryptByDES(param);
      this.axios.post(this.$baseURL + url, { data: param }).then(res => {
        this.loading = false;
        if (res.data.Code == 200) {
          if (res.data.Data) {
            let data = this.$decryptByDES(res.data.Data);
            data = JSON.parse(data);
            this.pageCount = data.Count == 0 ? 1 : data.Count;
            this.dataList = data.List||[];
          } else {
            this.dataList = [];
          }
        }
      });
    },
    /*
     *充提币接口数据的请求
     */
    reqCoinWaste(type) {
      this.loading = true;
      let param = {
        Page: this.sizer.page,
        PageSize: this.sizer.pagesize,
        Type: this.currentSelect.value, //类型 coinid
        WasteType: type //1：充币；2：提币，0全部交易流水
      };
      this.reqApi("/asset/newdealrecord", param);
    },
    /*
     *转账记录接口的请求,原列表不支持分页，需要支持分页
     *1-转账记录；2-法币交易；3-币币交易
     */
    reqDealFlow(type) {
      this.loading = true;
      let param = {
        Page: this.sizer.page,
        PageSize: this.sizer.pagesize,
        FlowType: type,
        CoinType: this.currentSelect.value * 1 //coinid
      };
      this.reqApi("/asset/dealflow", param);
    },
    /*
     *划转记录
     */
    reqTransfer() {
      this.loading = true;
      let param = {
        CoinId: this.currentSelect.value,
        Page: this.sizer.page,
        PageSize: this.sizer.pagesize
      };
      this.reqApi("/transfer/log", param);
    },
    // 分页点击
    handleSizeChange(val) {
      this.sizer.page = val * 1;
      this.cardClick();
    },
    handleCurrentChange(val) {
      this.sizer.page = val * 1;
      this.cardClick();
    },
    cardClick(val) {
     
    },
    // 默认显示的改变
    cardChange(val) {
      this.isCardIndex = val;
    }
  },

  computed: {
    /*
     *@description 从仓库导入支持的法币交易列表
     */
    ...mapState(["cecSuppertCoin"])
  },

  created() {
    this.reqCecSuppertCoin();
    // 资产秦秋
    this.reqCoinWaste(1);
  },

  mounted() {}
};
</script>
<style scoped>
.record-page {
  width: 1200px;
  margin: 60px auto 0 auto;
  min-height: calc(100vh - 395px);
  color: #303133;
}
.record-header {
  line-height: 25px;
  padding: 27px 0 27px 10px;
  font-size: 18px;
  font-weight: 500;
}
.record-header a {
  color: #31c0ce;
}
.card-box {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  /* border: solid 1px rgba(0, 0, 0, 0.1); */
  background-color: rgba(244, 244, 245, 0.5);
  border-bottom: solid 1px #e8e8e8;
}
.card-box span {
  display: inline-block;
  margin-right: 40px;
  font-size: 16px;
  cursor: pointer;
}
.card-box .right span {
  text-align: right;
  margin: 0px;
  color: #999999;
  font-size: 14px;
  position: relative;
}
.el-icon {
  transition: all 0.5s;
  transform-origin: 50% 50%;
}
.card-box .right span:hover .el-icon {
  transform: rotate(180deg);
}
.card-curray {
  color: #31c0ce;
  border-bottom: solid 2px #31c0ce;
  z-index: 2019;
  line-height: 47px;
}
.table-body {
  margin-bottom: 30px;
  min-height: 300px;
}
.fenye {
  /* border:solid 1px red; */
  margin-top: 42px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
}
/* 币种选择框 */
.right .coin-nav {
  position: absolute;
  top: 45px;
  left: -20px;
  z-index: 2019;
  width: 78px;
  background: rgba(248, 248, 248, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.27);
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
  height: 0px;
}
.right .coin-nav .nav-list {
  height: 26px;
  line-height: 26px;
}
.right .coin-nav .nav-list:hover {
  background-color: #f0f1f1;
}
/* 组件样式 */
.module-box .type-info-box {
  display: flex;
  padding: 0 19px;
  line-height: 54px;
}
.module-box .list-info {
  font-size: 12px;
  color: #666666;
}
.module-box .coin-box {
  width: 192px;
}
.module-box .useable-box {
  width: 200px;
}
.module-box .frost-box {
  width: 190px;
}
.module-box .ttm-box {
  width: 266px;
}
.module-box .locked-box {
  width: 196px;
}
.module-box .action-box {
  width: 185px;
  text-align: right;
}
/* 表格的特殊样式 */
.text-positive{
  color:#0bbd9e;
}
.text-negative{
  color:#d65469
}
</style>
